<template>
    <div>
        <div style="margin-top: 15px;">
            <el-input placeholder="请输入内容" v-model="posList" class="input-with-select">
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                    <el-option label="宠主名" value="petName"></el-option>
                    <el-option label="账号" value="userName"></el-option>
                </el-select>
                <el-button @click="handleSearch" slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <el-table :data="tableData" border max-height="800" style="width: 100%">
            <el-table-column prop="userName" label="账号" width="120"></el-table-column>
            <el-table-column prop="petName" label="昵称" width="120"></el-table-column>
            <el-table-column prop="phone" label="电话号码" width="120"></el-table-column>
            <el-table-column prop="orderNumber" label="订单号" width="120"></el-table-column>
            <el-table-column prop="address" label="送货地址" width="200"></el-table-column>
            <el-table-column prop="buyTime" label="购买时间" width="120"></el-table-column>
            <el-table-column prop="buyService" label="购买服务" width="200"></el-table-column>
            <el-table-column prop="shops" label="商品" width="200"></el-table-column>
            <el-table-column prop="shopsNumber" label="数量" width="120"></el-table-column>
            <el-table-column fixed="right" label="操作" width="90">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 修改 -->
        <div>
            <template>
                <el-dialog title="修改" :visible="dialogFormVisible">
                    <div slot="header" class="clearfix">
                        <span>编辑信息</span>
                    </div>
                    <div class="text item">
                        <el-form ref="ruleForm" class="demo-ruleForm">
                            <el-form-item label="昵称" prop="petName">
                                <el-input
                                    v-model="ruleForm.petName"
                                    autocomplete="off"
                                    placeholder="请输入昵称"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="电话号码" prop="phone">
                                <el-input
                                    v-model="ruleForm.phone"
                                    autocomplete="off"
                                    placeholder="请输入电话号码"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="账号" prop="userName">
                                <el-input
                                    v-model="ruleForm.userName"
                                    autocomplete="off"
                                    placeholder="请输入账号"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="地区" prop="address">
                                <el-input
                                    v-model="ruleForm.address"
                                    autocomplete="off"
                                    placeholder="请输入地区"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="订单号" prop="orderNumber">
                                <el-input
                                    v-model="ruleForm.orderNumber"
                                    autocomplete="off"
                                    placeholder="请输入订单号"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="购买时间" prop="buyTime">
                                <el-input
                                    v-model="ruleForm.buyTime"
                                    autocomplete="off"
                                    placeholder="请输入时间"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="购买服务" prop="buyService">
                                <el-input
                                    v-model="ruleForm.buyService"
                                    autocomplete="off"
                                    placeholder="请输入服务"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="商品" prop="shops">
                                <el-input
                                    v-model="ruleForm.shops"
                                    autocomplete="off"
                                    placeholder="请输入商品"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="购买数量" prop="shopsNumber">
                                <el-input
                                    v-model="ruleForm.shopsNumber"
                                    autocomplete="off"
                                    placeholder="请输入数量"
                                ></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel">取 消</el-button>
                        <el-button type="primary" @click="confirm">确定</el-button>
                    </div>
                </el-dialog>
            </template>
        </div>
    </div>
</template> 

<script>
import { getOrder, updateOrder ,searchOrder} from '../../../service/orderService.js';
export default {
    methods: {
        handleClick(row) {
            console.log(row);
            this.ruleForm = row;
            this.dialogFormVisible = true;
        },
        show: async function() {
            let data = await getOrder();
            console.log(data);
            this.tableData = data; //将ajax返回来的值保存
        },
        update: async data => {
            let res = await updateOrder(data);
        },
        cancel() {
            console.log('取消');
            this.show();
            this.dialogFormVisible = false;
        },
        confirm(val) {
            this.update(this.ruleForm);
            this.show();
            this.dialogFormVisible = false;
        },
        async search (newData) {
            let res = await searchOrder(newData);
            this.tableData = res;
            
        },
      handleSearch() {
            let data = {
                petName: '',
                userName: ''
            };
            let newData = {};
            console.log(this.posList, this.select);
            for (let key in data) {
                if (key == this.select) {
                    newData[key] = this.posList;
                }
            }
            this.search(newData);
        }
    },
    created() {
        //生命周期方法  当初始化项目则调用渲染方法
        this.show();
    },
    data() {
        return {
            dialogFormVisible: false,
            tableData: [],
            ruleForm: {},
            posList: '',
            select: ''
        };
    }
};
</script>

<style>
</style>